<!--
  Generated template for the GamePage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>
    <ion-toolbar>
        <ion-buttons start>
            <button ion-button icon-only color="dark" (click)="goBack()">
                <ion-icon name="arrow-back"></ion-icon>
            </button>
        </ion-buttons>
        <!-- <ion-buttons end>
            <button ion-button icon-only color="dark">
                <ion-icon style="font-size: 24px;" name="md-share"></ion-icon>
            </button>
        </ion-buttons> -->
    </ion-toolbar>
</ion-header>

<ion-content padding>

    <ion-card-title class="game-icon">
        <img class="game-icon" [src]="game.icon">
    </ion-card-title>
    <ion-item text-center>
        <h2 class="game-name">{{ game.name }}</h2>
        <p class="sub-title">{{ game.summary }}</p>
        <p class="sub-title">
            <ion-icon style="margin-right: 4px" *ngFor="let i of [1,2,3,4,5]" [name]="i <= game.star ? 'ios-star' : 'ios-star-outline'"> </ion-icon>
        </p>
        <p class="sub-title">
            <ion-badge style="margin-right: 4px" *ngFor="let tag of game.tags.split(',')">{{tag}}</ion-badge>
        </p>
    </ion-item>

    <ion-slides pager class="slides" *ngIf="game.screenshots">
        <ion-slide *ngFor="let screenshot of game.screenshots.split(',')">
            <img class="slide-image" [src]="screenshot">
        </ion-slide>
    </ion-slides>

    <ion-card-content>
        <p class="second-title">描述</p>
        <p [style.height]="descHeight" style="overflow: hidden;" [innerHTML]="game.desc"></p>
        <button ion-button color="secondary" clear block (click)="showDescModel()">{{btnTextShowDesc}}</button>
    </ion-card-content>

    <p class="second-title">评价</p>
    <p><button ion-button block outline (click)="showMyComment()">我要评价</button></p>

    <ion-card inset *ngFor="let comment of comments">
        <ion-item>
            <ion-avatar item-start [innerHTML]="comment.icon">
            </ion-avatar>
            <h2 style="margin-top:0px;">{{comment.user_name}}</h2>
            <p>
                <ion-icon style="margin-right: 4px" *ngFor="let i of [1,2,3,4,5]" [name]="i <= comment.star ? 'ios-star' : 'ios-star-outline'"> </ion-icon>
            </p>
            <p>{{comment.created_at}}</p>
        </ion-item>
        <ion-card-content>
            <div>{{comment.content}}</div>
        </ion-card-content>
    </ion-card>
    <button ion-button color="secondary" clear block (click)="showAllComments()">查看全部评论</button>
    <div>
        <ion-item>
            <h2 style="margin-top: 0px;">开发者</h2>
            <p>{{game.developer}}</p>
        </ion-item>
    </div>
    <div>
        <ion-item>
            <h2 style="margin-top: 0px;">版本号</h2>
            <p>{{game.version}}</p>
        </ion-item>
    </div>
</ion-content>

<ion-footer padding>
    <button ion-button block color="secondary" (click)="runGame()">打开</button>
</ion-footer>